<%
var title="流程定义";
layout("/layouts/blank.html",{title:title}){
%>
<link href="${base}/static/diagram-viewer/jquery.qtip.min.css" rel="stylesheet" type="text/css"/>
<link href="${base}/static/diagram-viewer/jquery.growl.css" rel="stylesheet" type="text/css"/>
<link href="${base}/static/diagram-viewer/jquery-confirm.min.css" rel="stylesheet" type="text/css"/>
<link href="${base}/static/diagram-viewer/displaymodel.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="${base}/static/diagram-viewer/jquery.qtip.min.js"></script>
<script type="text/javascript" src="${base}/static/diagram-viewer/jquery.growl.js"></script>
<script type="text/javascript" src="${base}/static/diagram-viewer/jquery-confirm.min.js"></script>
<script type="text/javascript" src="${base}/static/diagram-viewer/raphael.min.js"></script>
<script type="text/javascript" src="${base}/static/diagram-viewer/bpmn-draw.js"></script>
<script type="text/javascript" src="${base}/static/diagram-viewer/bpmn-icons.js"></script>
<script type="text/javascript" src="${base}/static/diagram-viewer/Polyline.js"></script>
<div class="main-content">
    <div class="box-main">

        <div id="bpmnModel" style="margin-left:auto;margin-right:auto;overflow-x:hidden;overflow-y:hidden;"></div>

    </div>
</div>
<% } %>

<script type="text/javascript">
    var NORMAL_STROKE = 1;
    var SEQUENCEFLOW_STROKE = 1.5;
    var TASK_STROKE = 1;
    var CALL_ACTIVITY_STROKE = 2;
    var ENDEVENT_STROKE = 3;
    var CURRENT_ACTIVITY_STROKE = 2;

    var COMPLETED_COLOR = "#2674aa";
    var TEXT_COLOR = "#373e48";
    var CURRENT_COLOR = "#66AA66";
    var HOVER_COLOR = "#666666";
    var ACTIVITY_STROKE_COLOR = "#bbbbbb";
    var ACTIVITY_FILL_COLOR = "#f9f9f9";
    var MAIN_STROKE_COLOR = "#585858";

    var TEXT_PADDING = 3;
    var ARROW_WIDTH = 4;


    var INITIAL_CANVAS_WIDTH;
    var INITIAL_CANVAS_HEIGHT;

    var paper;
    var viewBox;
    var viewBoxWidth;
    var viewBoxHeight;

    var canvasWidth;
    var canvasHeight;

    var definitionId = "${definitionId}";
    var instanceId = "${instanceId}";
    var historyInstanceId = "${hisInsId}";


    var bpmnData;

    function _showTip(htmlNode, element) {
        var documentation = "";
        if (element.name && element.name.length > 0) {
            documentation += "<b>Name</b>: <i>" + element.name + "</i><br/><br/>";
        }

        var text;
        if (element.name && element.name.length > 0) {
            text = element.name;
        } else {
            text = element.id;
        }

        htmlNode.qtip({
            content: {
                text: documentation,
                title: {
                    text: text
                }
            },
            position: {
                my: 'top left',
                at: 'bottom center',
                viewport: $(window)
            },
            hide: {
                fixed: true, delay: 100,
                event: 'click mouseleave'
            },
            style: {
                classes: 'ui-tooltip-kisbpm-bpmn'
            }
        });
    }

    function _drawStringDataObject() {

    }
    function _addHoverLogic() {

    }

    function _showProcessDiagram() {
        var request;
        if (historyInstanceId != "") {
            request = $.ajax({
                type: 'get',
                url: '${base!}/flowDesign/admin/process-instances/' + historyInstanceId + '/history-model-json?processDefinitionId=' + definitionId + '&nocaching=' + new Date().getTime()
            });

        } else if (instanceId != "") {
            request = $.ajax({
                type: 'get',
                url: '${base!}/flowDesign/admin/process-instances/' + instanceId + '/model-json?processDefinitionId=' + definitionId + '&nocaching=' + new Date().getTime()
            });

        } else {
            request = $.ajax({
                type: 'get',
                url: '${base!}/flowDesign/admin/process-definitions/' + definitionId + '/model-json?nocaching=' + new Date().getTime()
            });
        }

        request.done(function (data, textStatus, jqXHR) {
            if (data.ok == false) {
                parent.core.error(data.msg);
            }
            if (!data.elements || data.elements.length == 0) return;

            INITIAL_CANVAS_WIDTH = data.diagramWidth + 20;
            INITIAL_CANVAS_HEIGHT = data.diagramHeight + 50;
            canvasWidth = INITIAL_CANVAS_WIDTH;
            canvasHeight = INITIAL_CANVAS_HEIGHT;
            viewBoxWidth = INITIAL_CANVAS_WIDTH;
            viewBoxHeight = INITIAL_CANVAS_HEIGHT;

            var x = 0;
            if ($(window).width() > canvasWidth) {
                x = ($(window).width() - canvasWidth) / 2 - (data.diagramBeginX / 2);
            }

            $('#bpmnModel').width(INITIAL_CANVAS_WIDTH);
            $('#bpmnModel').height(INITIAL_CANVAS_HEIGHT);
            paper = Raphael(document.getElementById('bpmnModel'), canvasWidth, canvasHeight);
            paper.setViewBox(0, 0, viewBoxWidth, viewBoxHeight, false);
            paper.renderfix();

            if (data.pools) {
                for (var i = 0; i < data.pools.length; i++) {
                    var pool = data.pools[i];
                    _drawPool(pool);
                }
            }

            var modelElements = data.elements;
            for (var i = 0; i < modelElements.length; i++) {
                var element = modelElements[i];
                try {
                    var drawFunction = eval("_draw" + element.type);
                    drawFunction(element);
                } catch (err) {
                    console.warn(err);
                }
            }

            if (data.flows) {
                for (var i = 0; i < data.flows.length; i++) {
                    var flow = data.flows[i];
                    _drawFlow(flow);
                }
            }

            bpmnData = data;
        });

        request.fail(function (jqXHR, textStatus, errorThrown) {
            alert("error");
        });
    }
    _showProcessDiagram();

</script>


